<template>
  <div class="app-container">
    <el-container style="height: 100%" v-loading="loading">
      <div class="left_container">
        <el-tabs
          @tab-click="changeLinkTab"
          type="card"
          v-if="activeName == 'xf'"
          v-model="linkName"
        >
          <el-tab-pane label="商户联" name="sh"></el-tab-pane>
          <el-tab-pane label="顾客联" name="gk"></el-tab-pane>
        </el-tabs>
        <div>
          <!-- 小票示例 -- 需要数据独立展示 -->
          <!-- 班结小票 -->
          <el-aside
            v-if="activeName === 'bj'"
            :class="{ top: activeName !== 'xf' }"
          >
            <receipt
              :activeName="activeName"
              :titleName="linkName"
              :dataList="BJList"
            ></receipt>
          </el-aside>
          <!-- 消费小票 --商户联-->
          <el-aside v-if="activeName === 'xf' && linkName === 'sh'">
            <receipt
              :activeName="activeName"
              :titleName="linkName"
              :dataList="XfShList"
            ></receipt>
          </el-aside>
          <!-- 消费小票 --顾客联-->
          <el-aside v-if="activeName === 'xf' && linkName === 'gk'">
            <receipt
              :activeName="activeName"
              :titleName="linkName"
              :dataList="XfGkList"
            ></receipt>
          </el-aside>
          <!-- 充值小票 -->
          <!-- <el-aside v-if="activeName === 'cz'" :class="{ top: activeName !== 'xf' }">
          <receipt
            :activeName="activeName"
            :titleName="linkName"
            :dataList="dataList"
          ></receipt>
        </el-aside> -->
          <!-- 退款小票 -->
          <!-- <el-aside v-if="activeName === 'tk'" :class="{ top: activeName !== 'xf' }">
          <receipt
            :activeName="activeName"
            :titleName="linkName"
            :dataList="dataList"
          ></receipt>
        </el-aside> -->
        </div>
      </div>
      <!-- 编辑模板 -->
      <el-container
        style="padding-left: 20px; display: flex; flex-direction: column"
      >
        <div class="title">编辑{{ title }}模板</div>
        <el-tabs
          type="border-card"
          v-model="activeName"
          @tab-click="handleTabChange"
        >
          <!-- <el-tab-pane label="班结小票" name="bj">
            <TabContent
            :dataList = "initData"
              :activeName="activeName"
              :linkName="linkName"
              @handle_change="onHandleChange"
            ></TabContent>
          </el-tab-pane> -->
          <!-- 商户联 -->
          <el-tab-pane label="消费小票" name="xf">
            <TabContent
              :list="initData"
              :activeName="activeName"
              :linkName="linkName"
              @handle_change="onHandleChange"
              @handle_apply="onHandleApply"
              @handle_default="onHandleDefault"
              v-show="linkName === 'sh'"
            ></TabContent>
            <TabContent
              :list="initData"
              :activeName="activeName"
              :linkName="linkName"
              @handle_change="onHandleChange"
              @handle_apply="onHandleApply"
              @handle_default="onHandleDefault"
              v-show="linkName === 'gk'"
            ></TabContent>
          </el-tab-pane>
          <!-- 顾客联 -->
          <!-- <el-tab-pane label="充值小票" name="cz">
            <TabContent
            :list = "initData"
              :activeName="activeName"
              :linkName="linkName"
              @handle_change="onHandleChange"
            ></TabContent>
          </el-tab-pane>
          <el-tab-pane label="退款小票" name="tk">
            <TabContent
            :list = "initData"
              :activeName="activeName"
              :linkName="linkName"
              @handle_change="onHandleChange"
            ></TabContent>
          </el-tab-pane> -->
        </el-tabs>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { cloneDeep } from "lodash";
import receipt from "./receipt";
import TabContent from "./TabContent.vue";
import { saveXFReceipt, getXFReceipt, defaultSet } from "@/api/printSetting/index";
export default {
  components: { receipt, TabContent },
  name: "PrintSetting",
  data() {
    return {
      // 小票类型，0-消费小票(商户联)，1-消费小票(顾客联)
      receiptType: "0",
      activeName: "xf",
      linkName: "sh",
      title: "消费小票",
      BJList: [], // 小票存入 bj的数据
      XfShList: [],
      XfGkList: [],
      CZList: [],
      TKList: [],
      initData: [], //初始数据
      loading: false,
      enterpriseId: null,
      disabled: false,
    };
  },
  created() {
    this.getXFData();
  },
  methods: {
    async getXFData() {
      this.loading = true
      const res = await getXFReceipt({ receiptType: this.receiptType });
      if(res.data) {
        this.initData = res.data.sectionList;
        this.enterpriseId = res.data.enterpriseId
      } else {
        this.$message.error('admin没有打印配置权限')
        this.disabled = true
      }
      this.loading = false
    },
    // 改变标题tab
    changeLinkTab(e) {
      this.linkName = e.name;
      if (this.linkName == "sh") {
        this.receiptType = "0";
      } else {
        this.receiptType = "1";
      }
      this.getXFData();
    },
    // 改变tab 编辑
    handleTabChange(e) {
      this.activeName = e.name;
      this.title = e.label;
    },
    // 修改tabContent 改变小票数据
    onHandleChange(e, aN, lN) {
      const data = cloneDeep(e)
      if (aN == "bj") this.BJList = data;
      if (aN == "cz") this.CZList = data;
      if (aN == "tk") this.TKList = data;
      if (aN == "xf") {
        if (lN == "sh") this.XfShList = data;
        if (lN == "gk") this.XfGkList = data;
      }
    },
    // 应用
    async onHandleApply(e) {
      if(!this.disabled) {
        const res = await saveXFReceipt({
          enterpriseId: this.enterpriseId,
          receiptType: this.receiptType,
          sectionList: e
        })
        this.$message.success(res.msg)
      }
    },
    // 恢复默认
    async onHandleDefault() {
      const res = await defaultSet({receiptType: this.receiptType,})
      this.initData = res.data.sectionList;
      this.enterpriseId = res.data.enterpriseId
    }
  },
};
</script>
<style lang="scss" scoped>
// 动态样式
.top {
  margin-top: 55px;
}
// 左侧布局
.left_container {
  display: flex;
  flex-direction: column;
}
// 侧边栏
::v-deep .el-aside {
  width: 20%;
  // height: 100vh;
  max-height: 80vh;
  min-height: 63.8vh;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  border: 1px solid #eee;
  .receipt {
    height: 100%;
    width: 100%;
    white-space: normal;
    overflow-y: auto; /* 超出部分隐藏 */
    display: flex;
    flex-direction: column;
  }
}
.title {
  margin-bottom: 25px;
  font-size: 20px;
}
.el-tabs {
  border: none;
}
.divider {
  margin: 3px 0;
  height: 1px;
  border-bottom: 1px dashed black;
}

</style>
